<template>
  <section class="todoapp">
    <Todoheader @add="addFn" />
    <Todobody :list="list" @del="delFn" @change="changeFn" />
    <TodoFooter :list="list" @clear="clearFn" />
  </section>
</template>

<script>
import Todoheader from './components/Todoheader.vue'
import Todobody from './components/Todobody.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  components: {
    TodoFooter,
    Todobody,
    Todoheader,
  },
  data() {
    return {
      list: [
        { id: 1, name: '吃饭', isDone: true },
        { id: 2, name: '睡觉', isDone: false },
        { id: 3, name: '打豆豆', isDone: true },
      ],
    }
  },
  methods: {
    delFn(id) {
      this.list = this.list.filter((item) => item.id !== id)
    },
    changeFn(id) {
      const result = this.list.find((item) => item.id === id)
      result.isDone = !result.isDone
    },
    addFn(name) {
      this.list.unshift({
        id: Date.now(),
        name,
        isDone: false,
      })
    },
    clearFn() {
      // console.log('清空')
      this.list = this.list.filter((item) => item.isDone === false)
    },
  },
}
</script>

<style></style>
